/** @format */

@import "utils";
.space {
  width: 50px;
}
.title {
  flex: 1;
}
.singer {
  width: 100px;
  margin-right: 200px;
}
.album {
  width: 100px;
  margin-right: 200px;
}
.time {
  width: 50px;
  color: #888888;
  margin-right: 40px;
}
.head {
  @include flex();
  padding: 10px 0 10px 5px;
  color: #888888;
}
.list {
  li {
    @include flex();
    align-items: center;
    padding: 10px 0 10px 5px;
    @include zebra-lists(#333333, #ffffff, #333333, #fafafa);
    &:hover {
      background-color: #f2f2f3;
    }
    .space {
      @extend .space;
    }

    .title {
      @include ellipsis();
      color: #303031;
      @extend .title;
    }
    .singer {
      @include ellipsis();
      color: #656565;
      @extend .singer;
    }
    .album {
      cursor: pointer;
      @include ellipsis();
      color: #656565;
      @extend .album;
      &:hover {
        color: #303031;
      }
    }
    .time {
      @extend .time;
    }
  }
}
